<template>
  <div>
    <div class="login">
      <el-header id="plattitles">
        <span> 自己用的测试平台登录页面 </span>
      </el-header>

      <el-main>
        <el-row>
          <el-input
              size="large"
              v-model="data.username"
              type="text"
              placeholder="输入名字"
          />
        </el-row>
        <el-row>
          <el-input
              size="large"
              v-model="data.password"
              type="password"
              placeholder="输入密码"
              show-password
          />
        </el-row>
        <el-row type="flex" justify="end">
          <el-col :span="9" :pull="9">
            <el-link type="primary" @click="register" id="link"
            >没有账号点击此处注册!
            </el-link
            >
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="loginapi" :loading="load.state">
              <span v-if="load.state == false">登录</span>
            </el-button>
            <!-- <el-link type="primary" @click="loginapi" id="link">denglu</el-link> -->
          </el-col>
        </el-row>
      </el-main>
    </div>
  </div>
</template>
<script>
import {login} from "@/api";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useTodoStore} from "../store/user";

export default {
  name: "MyLogin",
  setup() {
    let data = ref({
      username: "",
      password: "",
    });
    let load = ref({
      state: false,
    });
    let store = useTodoStore();

    console.log(store.name);

    const router = useRouter();

    function loginapi() {
      load.value.state = true;
      console.log(load.value.state);
      login(data.value.username, data.value.password)
          .then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              load.value.state = false;
              window.localStorage.setItem("token", res.data.data.access);
              ElMessage({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              store.$patch({
                name: res.data.data.username,
              });
              console.log(store.name);
              router.push({
                name: "HomePage",
              });
            } else {
              load.value.state = false;
              ElMessage({
                message: res.data.msg,
                type: "error",
                duration: 1000,
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      setTimeout(() => {
        load.value.state = false;
      }, 2000);
    }

    function register() {
      console.log(1232);
      router.push({
        name: "UserRegister",
      });
      console.log(123);
    }

    return {
      data,
      load,
      loginapi,
      register,
    };
  },
};
</script>

<style>
.login {
  width: 400px;
  height: 260px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 1px;
  border-color: #909399;
  border-radius: 5px;
  line-height: 90%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

#plattitles {
  text-align: center;
  position: relative;
  top: 25px;
  border-bottom: none;
}

.el-row {
  margin-bottom: 20px;
}

#link {
  width: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

